<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>{{count}}</p>
        <p><button @click="count++">count++</button></p>
        <hr>
        <p>{{obj.a}}----{{obj.b}}</p>
        <p>
            <button @click="addA">a++</button>
            <button @click="addB">b++</button>
            <button @click="reset">reset</button>
        </p>
    </div>
</body>
<script>

    // 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题

    let { createApp } = Vue;
    let { ref, reactive, readonly, computed, watch } = Vue;


    let app = createApp({
        setup(props) {





            let count = ref(10);  // {value:10}
            console.log(count);


            let obj = ref({ a: 1, b: 2 });   // {value:{a:1,b:2}}
            console.log(obj);

            let addA = () => {
                obj.value.a++
            }
            let addB = () => {
                obj.value.b++
            }
            let reset = () => {
                obj.value = { a: 1, b: 2 };
            }


            // watch监听  => 侦听一个或多个响应式数据源，并在数据源变化时调用所给的回调函数。
            // 1. watch(source,callback,options)  监听单个数据
            //    source 监听的数据(ref对象 reactive对象 computed, 返回数据的函数)
            //    callback 数据发生改变时触发的回调函数
            //    options  第三个可选的参数是一个对象
            //         deep:true/false  是否开启深度监听
            //         immediate:true/false  初始化阶段是否立即执行一次

            // 2. watch([source,source,source],callback)  监听单多数据
            // watch(count,(newVal,oldVal)=>{
            //     console.log("count发生了改变",newVal,oldVal);
            // })



            // watch监听  => 
            // watch监听ref对象时默认是浅层的,只关注ref对象的value值是否改变, 如果watch监听的ref对象的value值是一个对象  => 对象上的属性发生改变,不会触发watch监听
            // watch监听reactive响应式代理对象时默认是深层的  => 不需要开启深度监听

            // watch(obj,(newVal,oldVal)=>{
            //     console.log("obj发生了改变",newVal,oldVal);
            // })

            // 如何解决: 可以开启深度监听
            watch(obj,(newVal,oldVal)=>{
                console.log("obj发生了改变",newVal,oldVal);
            },{deep:true})




            return {
                count: count,
                obj: obj,
                addA: addA,
                addB: addB,
                reset: reset,
            }
        },
        mounted() {
            console.log("代理对象,this", this);

            /*  new Proxy({},{
                 get(){
                     // 判断是否是ref对象  => ref.value
                 },
                 set(){
                     // 判断是否是ref对象   => ref.value = xxx
                 }
             }) */
        },
    })


    app.mount("#app");


</script>

</html>